<script lang="ts">
import { Vue, Watch, Prop } from "vue-property-decorator";
import store from "@/assets/modules/store";
import { getModule, getModules } from "@/assets/modules/arcgisAPI";
import { hex2Rgba } from "~/assets/modules/utils";
// import { changeExtent } from "@/assets/modules/utils";
// import exportVue from "@/assets/modules/exportVue";
export default class extends Vue {
  // evt: any = null;

  // clickObject: any = "";

  // highlight: any = null;

  // trackLayer: any = null;

  get view() {
    return store.mapView;
  }

  // get loaded2d() {
  //   return this.$store.getters["view/loaded2d"];
  // }

  // @Watch("loaded2d")
  // async handleLoadedChange() {
  //   if (this.loaded2d) {
  //   }
  // }

  async addGraphics(features: any[]) {
    const win = window as any;
    const areaConfig = win.areaConfig;
    const color = areaConfig.color;
    const Graphic = await getModule("esri/Graphic");
    this.clearGraphic();
    const view = this.view;
    if (!view) return;
    const graphics = features.map(el => {
      const feature = el.clone();
      const id = el.attributes.QJDM;
      const c: string = color[id.substr(0, 6)] || "#ffffff";
      feature.symbol = {
        type: "simple-fill",
        style: "solid",
        color: hex2Rgba(c + "1a"),
        outline: {
          color: c,
          width: 2
        }
      };
      return feature;
    });
    const points = features.map(el => {
      const pointGraphic = new Graphic({
        geometry: el.geometry.centroid,
        symbol: this.getTextSymbol(el.attributes.QJMC)
      });
      return pointGraphic;
    });

    view.graphics.addMany(graphics);
    view.graphics.addMany(points);
  }

  getTextSymbol(text: string, level?: number) {
    return {
      type: "text",
      color: "black",
      haloColor: "white",
      haloSize: "2px",
      text,
      font: {
        size: level === 2 ? "14px" : "16px"
      }
    };
  }

  destroy() {
    this.clearGraphic();
    // this.closeGridLayer();
    // this.closeFloorLayer();
    // this.clickObject = "";
    // if (this.evt) {
    //   this.evt.remove();
    //   this.evt = null;
    // }
    // if (this.highlight) {
    //   this.highlight.remove();
    // }
  }

  clearGraphic() {
    const view = this.view;
    if (!view) return;
    view.graphics.removeAll();
  }

  // // 绑定地图点击事件
  // bindClickEvt() {
  //   if (this.evt) {
  //     this.evt.remove();
  //     this.evt = null;
  //   }
  //   if (this.view) {
  //     this.evt = this.view.on("click", (e: any) => {
  //       this.view.hitTest(e, this.view.graphics).then((res: any) => {
  //         // this.$store.commit("videoPanel/setLeftPanelShow", true);
  //         const results = res.results;
  //         for (let i = 0; i < results.length; i++) {
  //           const graphic = results[i].graphic;
  //           if (this.clickObject === "floor") {
  //             this.$store.commit("videoPanel/setLeftPanelShow", true);
  //             if (graphic.layer.id === "floor") {
  //               this.view
  //                 .whenLayerView(graphic.layer)
  //                 .then((layerView: any) => {
  //                   const query = layerView.createQuery();
  //                   query.returnGeometry = true;
  //                   query.outFields = ["*"];
  //                   query.where = `OBJECTID = ${graphic.attributes.OBJECTID}`;
  //                   graphic.layer.queryFeatures(query).then((results: any) => {
  //                     if (results && results.features) {
  //                       if (this.highlight) {
  //                         this.highlight.remove();
  //                       }
  //                       this.highlight = layerView.highlight(results.features);
  //                       exportVue.$emit("get-floor", results.features[0]);
  //                     }
  //                   });
  //                 });
  //             }
  //           }
  //         }
  //       });
  //     });
  //   }
  // }

  // /**
  //  * 添加网格范围服务
  //  **/
  // async addGrid() {
  //   const url = (window as any).urlConfig.grid.url;
  //   const modules = await getModules([
  //     "esri/layers/FeatureLayer",
  //     "esri/geometry/Point"
  //   ]);
  //   const [FeatureLayer, Point] = modules;
  //   const layer = new FeatureLayer({
  //     id: "grid",
  //     url
  //   });
  //   store.wgfwLayer = layer;
  //   this.view.map.add(layer);
  // }
  // closeGridLayer() {
  //   const view = this.view;
  //   if (!view) return;
  //   const layers = view.map.layers.filter((el: any) => {
  //     return el.id === "grid";
  //   });
  //   store.wgfwLayer = null;
  //   view.map.removeMany(layers);
  // }
  // /**
  //  * 添加石亭路楼盘表服务
  //  **/
  // async addFloor() {
  //   const url = (window as any).urlConfig.LPB.url;
  //   const modules = await getModules([
  //     "esri/layers/FeatureLayer",
  //     "esri/geometry/Point"
  //   ]);
  //   const [FeatureLayer, Point] = modules;
  //   store.floorLayer = new FeatureLayer({
  //     id: "floor",
  //     url
  //   });
  //   this.view.map.add(store.floorLayer);

  //   // const point = new Point({
  //   //   x: 118.08761366875743,
  //   //   y: 24.483309386311685,
  //   //   spatialReference: store.spatialReference
  //   // });
  //   // this.view.goTo({
  //   //   target: point,
  //   //   scale: 1000
  //   // });
  // }

  // closeFloorLayer() {
  //   const view = this.view;
  //   if (!view) return;
  //   const layers = view.map.layers.filter((el: any) => {
  //     return el.id === "floor";
  //   });
  //   view.map.removeMany(layers);
  //   store.floorLayer = null;
  // }

  // highLightFloor(lzId: string) {
  //   console.log(lzId);
  //   const view = this.view;
  //   if (!view) return;
  //   exportVue.$emit("get-floor", null);
  //   view.whenLayerView(store.floorLayer).then((layerView: any) => {
  //     let query = store.floorLayer.createQuery();
  //     query.where = "LPBDZBH = " + lzId;
  //     query.outSpatialReference = store.spatialReference;
  //     store.floorLayer.queryFeatures(query).then((result: any) => {
  //       if (this.highlight) {
  //         this.highlight.remove();
  //       }
  //       if (result && result.features && result.features.length > 0) {
  //         this.highlight = layerView.highlight(result.features[0]);
  //         view.extent = changeExtent(
  //           result.features[0].geometry.extent.clone()
  //         );
  //         exportVue.$emit("get-floor", result.features[0]);
  //       } else {
  //         this.$message.warning({
  //           duration: 1000,
  //           message: "数据源未收录楼幢面位置"
  //         });
  //         exportVue.$emit("get-floor", null);
  //       }
  //     });
  //   });
  // }
}
</script>

<style></style>
